<template>
    <div class="bottomFloat" :style="`height:${options.lineHeight/2}px;font-size:${options.fontSize/2 ||12}px;color:${options.textColor || '#ffffff'};margin-top:${options.paddingTop/2}px;margin-bottom:${options.paddingBottom/2}px`">
        <div class="fx" v-for='(item,index) in options.btnList' :key='index' :style="`background:${item.borderType==2 ? item.bgOrBorderColor:''};border:1px solid ${item.borderType==1 ? item.bgOrBorderColor:'none'};line-height:${options.lineHeight/2}px;padding:0 ${options.textPadding/2}px;font-family:${item.textFontFamily || 'Microsoft YaHei' };color:${item.textColor || '#ffffff' };font-size:${item.fontSize/2 ||14}px;border-radius:${options.borderRadius/2}px;margin-right:${index==0 ?options.btnInnerMargin/4: options.btnOutMargin/2}px;margin-left:${index==0 ?options.btnOutMargin/2:options.btnInnerMargin/4}px;`">
            {{item.textContent}} <span class="iconfont" >&#xe600;</span>
        </div>   
    </div>
</template>

<script>
export default {  
    props:{
        option:{
            type:Object
        }
    },
    methods:{
        getText(val){
            if(!val){
                return 
            }
            let text =val.replace(/\n/g, "<br/>");
            text = text.replace(/\s/g,'&nbsp');
            this.options.textContent = text;
        },
    },
    data(){
        return {
            options:{}
        }
    },
    watch:{
        option:function(val){
            this.options =JSON.parse(JSON.stringify(val));
            // this.options.textContent  = this.options.textConte nt ? this.options.textContent.replace(/\s/g,'&nbsp') :"";
        }
    },
    mounted(){
        this.options =JSON.parse(JSON.stringify(this.option));
    }
}
</script>
<style lang="less" scoped>
    .bottomFloat{
        width:100%;
        position: relative;
        display: flex;
        justify-content: center;
        align-content: center;
        .fx{
            width:50%;
            height: 100%;
            text-align:center;
            line-height:40px;
            box-sizing: border-box;
        }
    }
</style>